<template>
  <div>
    <el-form :inline="true" label-width="100px" label-position="right" >
      <el-form-item label="客户名称">{{billInfo.customerName}}</el-form-item>
      <el-form-item label="客户电话">{{billInfo.customerPhone}}</el-form-item>
      <el-form-item label="发运时间">{{billInfo.deliverGoodsTime}}</el-form-item>
      <div></div>
      <el-form-item label="货运部">{{billInfo.freight}}</el-form-item>
      <el-form-item label="货运部电话">{{billInfo.freightPhone}}</el-form-item>
      <el-form-item label="货运部地址">{{billInfo.freightAddress}}</el-form-item>
    </el-form>
    <hr style="border: .5px solid #e6e6e6;">
    <el-row>
      <el-col :span="20">'</el-col>
      <el-col :span="4">
        <el-button type="primary" @click="confirmAndSave1">确认更改</el-button>
      </el-col>
    </el-row>
    <hr style="border: .5px solid #e6e6e6;">
    <div>{{billDetailInfo}}</div>
  </div>
</template>

<script type="text/javascript">
  import { fetchList } from '@/api/article'
  export default{
    name: 'breakeBill',
    components: {},
    props: {
      billInfo: {
        type: Object,
        default: function() {
          return {
            customerName: '',
            customerPhone: '',
            deliverGoodsTime: '',
            freight: '',
            freightPhone: '',
            freightAddress: ''
          }
        }
      },
      billDetailInfo: '',
      dialog_break_bill_flag: ''
    },
    created() {
      this.list1 = this.getArr()
    },
    mounted() {
      console.log('订单的详情', this.billDetailInfo)
    },
    data() {
      return {
        list1: [],
        list2: []
      }
    },
    methods: {
      confirmAndSave1() {
        console.log('当前的订单详情', this.billDetailInfo)
      },
      confirmAndSave() {
        this.$confirm('此操作将该订单拆为两次发运, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          // 将数组整理成标准格式以保存到数据库
          // 这里还要做将更改的数据展示出来
          // 同时关闭拆单管理界面
          this.$emit('dialog_break_bill_flag', false)
          this.$message({
            type: 'success',
            message: '拆单成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消,当前页面还是可以拆单'
          })
        })
      },
      getData() {
        this.listLoading = true
        fetchList().then(response => {
          console.log('测试数据', response)
          this.list1 = response.data.items.splice(0, 5)
          this.list2 = response.data.items
        })
      },
      getArr() {
        // 格式化数组，供拖动列表使用
        const tempArr = []
        for (const k in this.billDetailInfo) {
          for (let i = 0; i < this.billDetailInfo[k].length; i++) {
            this.billDetailInfo[k][i].id = k + i
            this.billDetailInfo[k][i].icon = k
            tempArr.push(this.billDetailInfo[k][i])
          }
        }
        console.log('tempArr', tempArr)
        return JSON.parse(JSON.stringify(tempArr))
      }
    }
  }
</script>

<style type="text/scss" scoped>

</style>
